<!DOCTYPE html>
<html>
<head>
    <title>详情展示</title>
    {% include 'admin/common/header.html' %}
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container" style="margin-top: 10px;font-size: 35px;color: #5e5e5e;font-weight: bold;text-align: center;width: 100%">{{report_detail.planName}}</div>
        <div class="main-container"style="height: 270px;margin-top: 15px">
             <div class="layui-card"style="width: 50%;float:left; overflow:hidden">
              <div class="layui-card-header">演练评估与得分</div>
               <div class="layui-card-body">
                <table class="layui-table" lay-skin="line",style="min-height:500px">
                    <thead>
                      <tr>
                        <th>属性</th>
                        <th>值</th>
                     </tr>
                    </thead>
                    <tbody>
                      <tr>
{#                        {{ user_name }}#}
                        <td>打斗演练评估</td>
                        <td>{{report_detail.fightEvaluate}}</td>
                    </tr>
                   <tr>
{#                       {{ user_id }}#}
                        <td>演练操作得分</td>
                        <td>{{report_detail.work_score}}</td>
                    </tr>
                    <tr>

                        <td>演练流程得分</td>
                        <td>{{report_detail.process_score}}</td>
                    </tr>
                      <tr>
                          {#                        {{ training_time }}#}
                          <td>演练人员得分</td>
                          <td>{{ report_detail.staff_score }}</td>
                      </tr>
                      <tr>
                          {#                        {{ training_time }}#}
                          <td>演练评估结果</td>
                          <td>{{ report_detail.cal_result }}</td>
                      </tr>
                    </tbody>
                </table>
           </div>
             </div>
             <div class="layui-card"style="width: 45%;float:left; margin-left:10px;display:inline; overflow:hidden;">
                 <div class="layui-card-header">考核评价</div>
                 <div class="layui-card-body">
                     <div style="width: 100%;height: 205px;margin-left: 20px">
                         <img src="/static/images/medal.jpeg"
                              style="width: 35%;height: 100%;float:left; overflow:hidden">
                         <p style="font-weight: bold;font-size: 25px;color: #565c70;float:left; margin-left:20px;display:inline; overflow:hidden;margin-top:65px">
                             训练评分：{{ report_detail.work_score+report_detail.process_score + report_detail.staff_score }}</p>
                     </div>
                 </div>
             </div>
         </div>
        <div class="main-container">
             <div class="layui-card">
              <div class="layui-card-header">考核内容</div>
               <div class="layui-card-body">
                <table class="layui-table" lay-skin="line",style="min-height:500px">
                    <thead>
                    <tr>
                        <th>属性</th>
                        <th>值</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>打斗罪犯人数</td>
                        <td id="fightNumber">{{ report_detail.fightNumber }}</td>
                    </tr>
                    <tr>
                        <td>打斗训练方案描述</td>
                        <td id="description">{{ report_detail.description }}人</td>
                    </tr>
                    <tr>
                        <td>演练事件等级</td>
                        <td id="eventLevel">{{ report_detail.eventLevel }}</td>
                    </tr>
                    <tr>
                        <td>演练时长</td>
                        <td id="time">{{ report_detail.time }}</td>
                    </tr>
                    <tr>
                        <td>逃脱演练评估</td>
                        <td id="fightEvaluate">{{ report_detail.fightEvaluate }}</td>
                    </tr>
                    <tr>
                        <td>演练耗时最长的步骤</td>
                        <td id="step">{{ report_detail.step }}</td>
                    </tr>
                    </tbody>
                </table>
           </div>
             </div>
         </div>
{#        <div class="main-container">#}
{#         <div id="score_1" style="background-color:#ffffff;min-height:500px;padding: 10px"></div>#}
{#        </div>#}

    </div>

</form>
{% include 'admin/common/footer.html' %}


<script type="text/html" id="police-updateTime">
    {{ '  {{layui.util.toDateString(d.update_at,  "yyyy-MM-dd HH:mm:ss")}' |safe }}}
</script>

<script>


layui.use(['layer', 'echarts', 'element', 'count'], function () {
var chartDom = document.getElementById('score_1');
var myChart = echarts.init(chartDom);
var option;

setTimeout(function () {
  option = {
    legend: {},
    tooltip: {
      trigger: 'axis',
      showContent: false
    },
    dataset: {
      source: [
        ['时长', '10分', '20分', '30分', '40分', '50分', '60分'],
        ['血氧采集与评估', 5, 8, 8, 7, 5, 8],
        ['血压采集与评估', 5, 5, 5, 5, 7, 6],
        ['呼吸与心率采集与评估', 4, 6, 6, 3, 4, 3],
        ['温度采集与评估', 2, 3, 4, 1, 3, 4]
      ]
    },
    xAxis: { type: 'category' },
    yAxis: { gridIndex: 0 },
    grid: { top: '55%' },
    series: [
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'pie',
        id: 'pie',
        radius: '30%',
        center: ['50%', '25%'],
        emphasis: {
          focus: 'self'
        },
        label: {
          formatter: '{b}: {@1月} ({d}%)'
        },
        encode: {
          itemName: '训练科目',
          value: '1月',
          tooltip: '1月'
        }
      }
    ]
  };
  myChart.on('updateAxisPointer', function (event) {
    const xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
      const dimension = xAxisInfo.value + 1;
      myChart.setOption({
        series: {
          id: 'pie',
          label: {
            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
          },
          encode: {
            value: dimension,
            tooltip: dimension
          }
        }
      });
    }
  });
  myChart.setOption(option);
});

option && myChart.setOption(option);
})




</script>
</body>
</html>